var wkid = 4326;
var token = "44757c5cb4d96f74d897dc4ba430ffa3";
//创建天地图影像底图
var layerTianDiImg = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: getLayerUrlByData('image', wkid, token),
        projection: 'EPSG:' + wkid,
        wrapX: true,
        crossOrigin: 'anonymous'
    })
});
/*
 * 获取在线天地图
 * type:获取的瓦片类型，影像、矢量
 * wkid:坐标系
 * token:官网申请的开发者token
 */
function getLayerUrlByData(type, wkid, token) {
    var url = '', layerId, tileMatrixSetId;
    if (type === 'image') {
        url = 'http://t{1-7}.tianditu.com/DataServer?';
        layerId = "img_";
        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
    } else if (type === 'label') {
        url = 'http://t{1-7}.tianditu.com/DataServer?';
        layerId = "cia_";
        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
    } else if (type === 'street') {
        url = 'http://t{1-7}.tianditu.com/DataServer?';
        layerId = "vec_";
        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
    } else if (type === 'street_label') {
        url = 'http://t{1-7}.tianditu.com/DataServer?';
        layerId = "cva_";
        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
    }
    return url + 'T=' + layerId + tileMatrixSetId + '&x={x}&y={y}&l={z}&tk=' + token;
}

const map = new ol.Map({
    layers: [layerTianDiImg,],
    target: 'map',
    // view: new ol.View({
    //     center: [-11000000, 4600000],
    //     zoom: 4,
    // }),
    view: new ol.View({
        center: ol.proj.fromLonLat([113.4491, 22.9156]),
        zoom: 13
    })
});

const imageStyle = new ol.style.Style({
  image: new ol.style.Circle({
    radius: 5,
    fill: new ol.style.Fill({color: 'yellow'}),
    stroke: new ol.style.Stroke({color: 'red', width: 1}),
  }),
});

map.on('singleclick', function (e) {
    console.log('地图被单击了！');
});
map.on('dblclick', function (e) {
    console.log('地图被双击了！');
});
map.on('click', function (e) {
    console.log('地图被点击了！');
});

const n = 200;
const omegaTheta = 30000; // Rotation period in ms
const R = 7e6;
const r = 2e6;
const p = 2e6;
layerTianDiImg.on('postrender', function (event) {
  const vectorContext = ol.render.getVectorContext(event);
  const frameState = event.frameState;
  const theta = (2 * Math.PI * frameState.time) / omegaTheta;
  const coordinates = [];
  let i;
  for (i = 0; i < n; ++i) {
    const t = theta + (2 * Math.PI * i) / n;
    const x = (R + r) * Math.cos(t) + p * Math.cos(((R + r) * t) / r);
    const y = (R + r) * Math.sin(t) + p * Math.sin(((R + r) * t) / r);
    coordinates.push([x, y]);
  }
  vectorContext.setStyle(imageStyle);
  vectorContext.drawGeometry(new ol.geom.MultiPoint(coordinates));

  // const headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]);

  // vectorContext.setStyle(headOuterImageStyle);
  // vectorContext.drawGeometry(headPoint);
  //
  // vectorContext.setStyle(headInnerImageStyle);
  // vectorContext.drawGeometry(headPoint);

  map.render();
});
map.render();